<template>
  <view class="tbody" style="margin-top: 22rpx;">
    <!-- 头部 -->
    <view class="header">
      <!-- 活动总数 -->
      <view class="header-one">
        <view class="header-num">
          {{res.activeCount}}
        </view>
        <view class="header-str">
          活动总数
        </view>
      </view>
      <!-- 横杠 -->
      <view class="line">

      </view>
      <!-- 参与总人数 -->
      <view class="header-one">
        <view class="header-num">
          {{res.totalAttendance}}
        </view>
        <view class="header-str">
          参与总人数
        </view>
      </view>
      <!-- 横杠 -->
      <view class="line">

      </view>
      <!-- 成就 -->
      <view class="header-one">
        <view class="header-num">
          {{res.totalContributions}}
        </view>
        <view class="header-str">
          成就
        </view>
      </view>
    </view>
    <!-- 活动大屏展示 -->
    <view class="activity-visualization">
      <echarts></echarts>
    </view>
    <view class="activity-visualization">

      <echarts1></echarts1>
    </view>
  </view>
</template>

<script>
import echarts1 from "../../components/echarts/echarts1";
export default {
  components: { echarts1 },
  data() {
    return {
      res: ''
    };
  },
  onReady() {
    this.allData();
  },
  methods: {
    allData() {
      uni.$http.get('/kanban/business/allData/').then((res => {
        this.res = res.data.data
        console.log('=============')
        console.log(res.data.data)
      }))
    }
  }
}
</script>

<style lang="scss">
.header{
  display: flex;
  justify-content: space-around;
  width: 686rpx;
  height: 188rpx;
  border-radius: 20rpx;
  background: #F2FDFF;
  box-shadow: 0px 0px 8rpx 0px #16C1DB;
  text-align: center;
  line-height: 1;
  margin-bottom: 48rpx;
  .line{
    height: 48rpx;
    opacity: 0.1;
    background: #CCCCCC;
    border-right: 1rpx solid #143A40;
    margin: auto 0;
  }
  .header-one{
    margin: auto 0;
  }
  .header-num{
    font-size: 32rpx;
    font-weight: 700;
    color: rgba(22, 193, 219, 1);
    margin-bottom: 24rpx;
  }
  .header-str{
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(20, 58, 64, 1);
  }
}

.activity-visualization{
  height: 476rpx;
  opacity: 1;
  border-radius: 20rpx;
  background: #F2FDFF;
  box-shadow: 0px 0px 8rpx 0px #16C1DB;
  .title{
    padding: 20rpx;
  }
}
</style>
